<template>
	<view>
		<view class="zy-status-bar"></view>
		<view class="zy-row-between" style="position: relative; height: 80rpx;">
			<view class="zy-row-center zy-text-black-lg-bold" :class="{'c-white': titleWhite}" style="position: absolute; z-index: 0;  width: 100%;">
				{{title}}
				<slot name='title'></slot>
			</view>
			<view class="zy-row" style="z-index: 99;">
				<slot>
					<!-- v-if="!hideBack" -->
					<view class="zy-row-center icon-bg zy-ml" v-if="!hideBack" @click="toBack()">
						<image src="@/static/img/ic-arrow-left-black.png" style="width: 26rpx;" mode="widthFix" ></image>
					</view>
				</slot>
				<view class="zy-text-white-lg-bold" v-if="leftTitle">{{leftTitle}}</view>
			</view>
			<view class="zy-row" style="z-index: 99;">
				<view class="zy-row" @click="onRight2">
					<slot name='right2'>
						<zy-icon :url="getImageUrl(`${rightIcon2}`)" v-if="rightIcon2"></zy-icon>
						<view class="zy-text-white-bold  zy-p" v-if="rightText2">{{rightText2}}</view>
					</slot>
				</view>
				<view class="zy-row zy-mr" @click="onRight">
					<slot name='right'>
						<view class="zy-row-center icon-bg" v-if="rightIcon">
							<image :src="rightIcon" style="width: 26rpx;" mode="widthFix"></image>
						</view>
						<view class="zy-text-white-bold" v-if="rightText">{{rightText}}</view>
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RouteUtil from '@/common/RouteUtil';
	export default {
		name:"zy-title",
		data() {
			return {
				rightUrl: '/static/img/set-black.png'
			};
		}, 
		props:{
			hideBack:{
				type: Boolean,
				default: () => false
			},
			title:{
				type: String,
				default(){
					return ''
				}
			},
			leftTitle:{
				type: String,
				default(){
					return ''
				}
			},
			titleWhite:{
				type: Boolean,
				default(){
					return false
				}
			},
			rightText:{
				type: String,
				default(){
					return ''
				}
			},
			rightIcon:{
				type: String,
				default(){
					return ''
				}
			},
			rightText2:{
				type: String,
				default(){
					return ''
				}
			},
			rightIcon2:{
				type: String,
				default(){
					return ''
				}
			},
		},
		methods: {
			toBack(){
				RouteUtil.back()
			},
			onRight(){
				this.$emit('right')
			},
			onRight2(){
				this.$emit('right2')
			}
		}
	}
</script>

<style>
.icon-bg{
	width: 72rpx;
	height: 72rpx;
	background: #FFFFFF;
	border-radius: 25rpx;
	box-shadow: 10rpx 18rpx 38rpx 0rpx rgba(211,209,216,0.3);
}

.c-white{
	color: #fff;
}
</style>